<template>
  <div class="photo-app">
    <!-- 顶部导航栏 -->
    <header class="app-header">
      <h1>photo share</h1>

      <div class="search-box">
        <input type="text" placeholder="search...">
      </div>
    </header>

    <!-- 照片网格（仅显示图片） -->
    <main class="photo-grid">
      <div 
        class="photo-card" 
        v-for="photo in photos" 
        :key="photo.id"
        @click="openModal(photo)"
      >
        <div class="photo-img-container">
          <img :src="photo.url" :alt="photo.title" class="photo-img">
        </div>
      </div>
    </main>

    <!-- 悬浮图片层（点击图片后显示） -->
    <div class="modal-overlay" v-if="showModal" @click="closeModal">
      <div class="modal-content" @click.stop>
        <button class="modal-close" @click="closeModal">×</button>
        <img 
          :src="selectedPhoto.url" 
          :alt="selectedPhoto.title" 
          class="modal-img"
        >
        <div class="modal-info">
          <h3 class="modal-title">{{ selectedPhoto.title }}</h3>
          <p class="modal-desc">{{ selectedPhoto.description }}</p>
          <div class="modal-actions">
            <button class="like-btn" @click="handleLike(selectedPhoto.id)">
              ❤️ {{ selectedPhoto.likes }}
            </button>
            <button class="save-btn">🔖 收藏</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PersonalPortfolio',
  data() {
    return {
      photos: [
        {
          id: 1,
          title: '创意设计',
          description: '个人创意设计作品展示与灵感记录',
          url: `https://picsum.photos/id/${this.getRandomId()}/600/400`,
          likes: 236
        },
        {
          id: 2,
          title: '项目展示',
          description: '精选项目案例与执行过程记录',
          url: `https://picsum.photos/id/${this.getRandomId()}/600/400`,
          likes: 189
        },
        {
          id: 3,
          title: '艺术摄影',
          description: '生活瞬间捕捉与艺术化表达',
          url: `https://picsum.photos/id/${this.getRandomId()}/600/400`,
          likes: 321
        },
        {
          id: 4,
          title: '概念草图',
          description: '设计构思与创意草图展示',
          url: `https://picsum.photos/id/${this.getRandomId()}/600/400`,
          likes: 156
        },
        {
          id: 5,
          title: '山川壮丽',
          description: '高山风景与自然奇观',
          url: `https://picsum.photos/id/${this.getRandomId()}/600/400`,
          likes: 287
        },
        {
          id: 6,
          title: '创意静物',
          description: '通过构图与色彩呈现静物的艺术感',
          url: `https://picsum.photos/id/${this.getRandomId()}/600/400`,
          likes: 210
        },
        {
          id: 7,
          title: '创意静物',
          description: '通过构图与色彩呈现静物的艺术感',
          url: `https://picsum.photos/id/${this.getRandomId()}/600/400`,
          likes: 210
        },
        {
          id: 8,
          title: '创意静物',
          description: '通过构图与色彩呈现静物的艺术感',
          url: `https://picsum.photos/id/${this.getRandomId()}/600/400`,
          likes: 210
        }
      ],
      showModal: false, // 控制悬浮层显示/隐藏
      selectedPhoto: null // 当前选中的照片数据
    };
  },
  methods: {
    // 生成1-1000之间的随机ID
    getRandomId() {
      return Math.floor(Math.random() * 1000) + 1;
    },
    // 打开悬浮层
    openModal(photo) {
      this.selectedPhoto = photo;
      this.showModal = true;
      document.body.style.overflow = 'hidden'; // 禁止背景滚动
    },
    // 关闭悬浮层
    closeModal() {
      this.showModal = false;
      this.selectedPhoto = null;
      document.body.style.overflow = ''; // 恢复背景滚动
    },
    // 处理点赞
    handleLike(photoId) {
      const photo = this.photos.find(item => item.id === photoId);
      if (photo) photo.likes++;
    }
  }
}
</script>

<style scoped>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.photo-app {
  background-color: #f5f5f5;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 顶部导航 */
.app-header {
  background: white;
  padding: 1rem 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-box input {
  padding: 0.6rem 1rem;
  border: 1px solid #eee;
  border-radius: 20px;
  outline: none;
  width: 240px;
  font-size: 0.9rem;
}

/* 照片网格布局 */
.photo-grid {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  flex: 1;
  /* 移除overflow-y:auto以减少空白空间 */
}

/* 照片卡片（仅显示图片） */
.photo-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.photo-card:hover {
  transform: translateY(-5px);
}

.photo-img-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  aspect-ratio: 4/3; /* 保持图片比例 */
}

.photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.photo-card:hover .photo-img {
  transform: scale(1.05);
}

/* 悬浮图片层（占80%屏幕） */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  padding: 2rem;
}

.modal-content {
  position: relative;
  width: 80%; /* 宽度占屏幕80% */
  max-width: 1200px;
}

.modal-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 悬浮层信息 */
.modal-info {
  color: white;
  padding: 1.5rem 0;
  text-align: center;
}

.modal-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.modal-desc {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 1rem;
}

/* 关闭按钮 */
.modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
}

/* 悬浮层按钮 */
.modal-actions {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.like-btn, .save-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}

.like-btn:hover {
  color: #ff4d4f;
}

.save-btn:hover {
  color: #0084ff;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
  }
  
  .app-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .search-box input {
    width: 100%;
  }

  .modal-content {
    width: 95%; /* 手机端占95%屏幕 */
  }
}
</style>